<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    /*.root_app{
      position: relative;
    }
    .root_app #app{
      position: absolute;
      left: 10px;
      top: 10px;
    }*/
    body, html{width: 100%;height: 400px;margin:0;font-family:"微软雅黑";font-size:14px;}
    #l-map{height:100%;width:100%;}
    #r-result{width:100%;}
    #but-addr{
      background-color:#409EFF;
      font-color:white;
    }
  </style>

  <title>关键字输入提示词条</title>
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/style.css">
  <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=7oj6qP0pgHF16AMtVR5Fj0hz9pjQFlhv"></script>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../plugins/elementui/index.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
</head>
<body>

  <div id="app">
    <el-form style="height: 50px" >
      <el-input type="text" v-model="formData.address" name="address" id="suggestId" style="width: 400px;" class="filter-item" ></el-input>
      <el-button type="primary" class="butT" id="but-addr" @click="addAddress()">确定</el-button>
    </el-form>
  </div>
  <div id="l-map"></div>

<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

<script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    map.centerAndZoom("武汉",12);                 // 初始化地图,设置城市和地图级别。

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });


    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;

        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });



    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果

            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注

        }
        var local = new BMap.LocalSearch(map, { //智能搜索

            onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script>

<script>
    new Vue({
        el:"#app",
        data:{
            formData:{}
        },
        methods:{
            addAddress(){
              //修复了只会将自己输入的值存入数据库的bug
              //修复了会输入空值的bug
              if(myValue==""||myValue==null){
                this.$message.error("请输入正确的地址");
                return;
              }
              axios.post("/address/ifExist.do",this.formData).then((response)=>{
                if (response.data.flag){
                  this.$message.error(res.data.message)
                }
              });

                axios.post("/address/addAddress.do",{address:myValue}).then((response)=>{
                    if (response.data.flag){
                        parent.vue.handleCloseDia();
                        //修复了输入框未清空的问题
                        this.formData.address=null;
                    }else {
                      this.$message.error(res.data.message)
                    }
                });
            }
        }
    });
</script>

</body>
</html>
